[#macro shopstaffListView]
<div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>确认要删除该条数据吗?</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleClose">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog title="添加员工" :visible.sync="customerVisible" width="50%">
        <div class="search">
            <el-form label-width="80px">
                <el-row>
                    <el-col :span="18" style="padding: 0 8px;">
                        <el-form-item label="用户名称">
                            <el-input title="用户名称" label="用户名称" v-model="searchCustomerObject.name" size="small"
                                placeholder="用户名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" style="padding: 5px 10px;">
                        <el-row type="flex" justify="end">
                            <el-button size="small" type="primary" @click="searchCustomerData">搜索</el-button>
                            <el-button size="small" plain @click="clearCustomerData">清除条件</el-button>
                        </el-row>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-table height="300" :data="customerData.list" style="width: 100%">
            <el-table-column label="姓名" width="100" prop="name">
            </el-table-column>
            <el-table-column width="160" label="电话" prop="phone">
            </el-table-column>
            <el-table-column  sortable label="添加时间" prop="addDate">
            </el-table-column>
            <el-table-column align="right">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleAdd(scope.row)">添加成员工</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination background :current-page="customerData.no" :page-size="customerData.size"
                :pager-count="5" layout="prev, pager, next" :page-count="customerData.totalPage"
                :total="customerData.total" @current-change="customerPageChange">
            </el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="productVisible = false">确 定</el-button>
        </span>
    </el-dialog>
    <div class="data-content1">
        <div class="tool-add" style="margin-top: 20px;">
            <el-button type="primary" size="small" @click="addView">新增</el-button>
        </div>

        <el-table v-loading="loading" :data="tableData.list" @cell-click="showView" @sort-change="changeTableSort"
            style="font-size: 12px;">
            <el-table-column label="姓名" prop="name" width="100">
            </el-table-column>
            <el-table-column label="电话" prop="phone" width="160">
            </el-table-column>
            <el-table-column label="创建时间" prop="addDate" >
            </el-table-column>
            <el-table-column width="180" align="center" fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-delete" class="danger" size="mini" style="cursor: pointer;"
                        @click="deleteData(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="page">
            <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
                :page-size="tableData.size" :pager-count="5" layout="total, sizes, prev, pager, next, jumper"
                :page-count="tableData.totalPage" :total="tableData.total" @size-change="sizeChange"
                @current-change="pageChange">
            </el-pagination>
        </div>
    </div>
</div>
[/#macro]
[#macro shopstaffListConfig]
<script type="text/x-template" id="my-shopstaff-list">
	[@shopstaffListView /]
</script>
<script type="text/javascript">
    var shopstaffListConfig = {};
    shopstaffListConfig.template = "#my-shopstaff-list";
    shopstaffListConfig.methods = config.basicMethod();


    shopstaffListConfig.methods.addView = function () {
        this.customerVisible=true;
        this.getSearchCustomerList();
    }
    shopstaffListConfig.methods.editView = function (row) {
        var self = this;
        var data = {};
        data.id = row.id;
        this.$router.push({ path: 'update', query: data });

    }

    shopstaffListConfig.methods.changeTableSort = function (column) {
        this.searchObject.sortField = column.prop;
        if ("descending" == column.order) {
            this.searchObject.sortMethod = "desc";
        }
        else if ("ascending" == column.order) {
            this.searchObject.sortMethod = "asc";
        }
        else {
            this.searchObject.sortMethod = "";
        }
        this.getSearchList();
    }
    shopstaffListConfig.methods.showView = function (row, column, cell, event) {
        if (cell.cellIndex > 0) {
            return;
        }
        var param = {};
        param.id = row.id;
        var self = this;
        this.$router.push({ path: 'view', query: param });

    }
    shopstaffListConfig.methods.show = function (row) {
        var param = {};
        param.id = row.id;
        var self = this;
        this.$router.push({ path: 'view', query: param });

    }
    shopstaffListConfig.methods.sizeChange = function (event) {
        this.searchObject.size = event;
        this.getSearchList();
    }
    shopstaffListConfig.methods.pageChange = function (index) {
        this.searchObject.no = index;
        this.getSearchList();
    }
    shopstaffListConfig.methods.getSearchList = function () {
        this.loading = true;
        var data = this.searchObject, that = this;
        $.post("${siteurl}tenantRest/shopstaff/search.htm", data, function (result) {
            if (result.code == 0) {
                that.tableData = result;
            }
            setTimeout(function () {
                that.loading = false;
            }, 300)
        });
    }


    shopstaffListConfig.methods.searchCustomerData = function () {
        this.searchCustomerObject.no = 1;
        this.getSearchCustomerList();
    }
    
    shopstaffListConfig.methods.clearCustomerData = function () {
        this.searchCustomerObject.name = "";
    }
    shopstaffListConfig.methods.customerPageChange = function (index) {
        this.searchCustomerObject.no = index;
        this.getSearchCustomerList();
    }


    
    shopstaffListConfig.methods.getSearchCustomerList = function () {
        this.loading = true;
        var data = this.searchCustomerObject, that = this;
        $.post("${siteurl}tenantRest/customer/search.htm", data, function (result) {
            if (result.code == 0) {
                that.customerData = result;
            }
            setTimeout(function () {
                that.loading = false;
            }, 300)
        });
    }
    shopstaffListConfig.methods.search = function () {
        this.searchObject.no = 1;
        this.getSearchList();
    }
    shopstaffListConfig.methods.clearData = function () {
        this.searchObject.tenantUser = "";
        this.searchObject.shop = "";
    }
    shopstaffListConfig.methods.deleteData = function (event) {
        this.selectId = event.id;
        this.dialogVisible = true;
    }

    shopstaffListConfig.methods.handleClose = function (done) {
        this.dialogVisible = false;
        var self = this;
        if (self.selectId) {
            var params = {};
            params.id = self.selectId;
            this.postData("${siteurl}tenantRest/shopstaff/delete.htm", params, function (res) {
                if (res.code == 0) {
                    self.$message({
                        message: '删除数据成功',
                        type: 'success'
                    });
                    self.getSearchList();
                } else {
                    self.$message.error(res.msg);
                }
            });
        }

    }
    shopstaffListConfig.methods.handleAdd = function (row) {
        this.customerVisible = false;
        var self = this;
        if (row) {
            var params = {};
            params.shop = self.selectId;
            params.tenantUser = row.id;
            this.postData("${siteurl}tenantRest/shopstaff/create.htm", params, function (res) {
                if (res.code == 0) {
                    self.$message({
                        message: '添加员工成功',
                        type: 'success'
                    });
                    self.getSearchList();
                } else {
                    self.$message.error(res.msg);
                }
            });
        }

    }

    

    shopstaffListConfig.computed = {};
    shopstaffListConfig.computed.shopOptions = function () {
        return this.$store.state.shopOptions;
    };

    shopstaffListConfig.data = function () {
        return {
            searchObject: {
                no: 1,
                size: 10,
                tenantUser: '',
                shop: ''
            },
            searchCustomerObject:{
                no: 1,
                size: 10,
                name:""
            },
            customerData:{},
            dialogVisible: false,
            customerVisible:false,
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            loading: false,
            tableData: {},
        }
    };
    shopstaffListConfig.methods.showAddView = function () {
        this.$router.push({ path: 'add' });
    };
    shopstaffListConfig.mounted = function () {
        var id = this.$route.query.id;
        this.selectId = id;
        this.searchObject.shop =this.selectId;
        this.getSearchList();
    }
    var shopstaffListView = Vue.component('list-shopstaff-view', shopstaffListConfig);
</script>
[/#macro]